<script setup>
import { onMounted, ref } from 'vue'
import { useCommonStore } from '../../../stores/commonStore';

const form = ref({})
// 更新和获取setting
const commonStore = useCommonStore()

const setValue = () => {
  form.value = commonStore.setting
}
const submit = () => {
  if (form.value == commonStore.setting) {
    ElMessage.error('请勿重复提交')
  }
  commonStore.updateSetting(form.value)
  setValue()
}

onMounted(() => {
  if (commonStore.setting != null) {
    setValue()
    return
  }
  commonStore.getSetting()
  setValue()
})

</script>

<template>
  <div class="flex px-20 py-10">
    <div class=" w-full">
      <el-form
        label-width="100px"
        :model="form"
        class=" font-semibold"
        size="large"
      >
        <el-form-item
          class="w-2/3"
          label="博客名称:"
        >
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item
          class="w-2/3"
          label="博客副标题:"
        >
          <el-input v-model="form.subTitle" />
        </el-form-item>

        <el-form-item
          class="w-1/3"
          label="用户名:"
        >
          <el-input v-model="form.userName" />
        </el-form-item>
        <el-form-item
          class="w-2/3"
          label="座右铭:"
        >
          <el-input v-model="form.motto" />
        </el-form-item>
      </el-form>
      <div class="px-32">
        <el-button
          type="primary"
          @click="submit"
        >
          <div class="w-28 tracking-widest">
            提交修改
          </div>
        </el-button>
      </div>
    </div>

  </div>

</template>

<style
  scoped
  lang='scss'
></style>